<template>
  <el-card class="el-card--has-heading success">
    <div slot="header" class="v-card__headerInner">
      <p>反馈信息</p>
      <transition name="el-zoom-in-center">
        <div v-show="showTip">
          <p class="v-card__header-tip">单击图片可预览多张图片</p>
        </div>
      </transition>
    </div>
    <v-table
      :dataSource="dataSource"
      :columns="columns"
      :loading="loading"
      :total="total"
      v-bind="bindProps"
      v-on="bindListeners"
    ></v-table>
  </el-card>
</template>

<script>
import { getUserFeedbackList } from '@/api'

/* components
---------------------------------------------------------------- */
import { Query } from '@/mixins'

/* model
---------------------------------------------------------------- */

export default {
  mixins: [Query('query')],

  data () {
    return {
      showTip: false,
      total: 0,
      dataSource: [],
      loading: false,
      columns: [
        { prop: 'feedbackContent', label: '反馈内容' },
        {
          prop: 'feedbackExamplePicture',
          label: '反馈示例图片',
          formatter: (row) => {
            const imgList = (row['feedbackExamplePicture'] || '')
              .split(',')
              .map((it) => this.$V.staticBaseURL + it)
            const preview = imgList[0]
            return (
              <el-image
                class="row-img"
                src={preview}
                preview-src-list={imgList}
              ></el-image>
            )
          }
        },
        { prop: 'feedbackContactNumber', label: '反馈联系电话' },
        { prop: 'feedbackContactEmail', label: '反馈联系邮箱' },
        { prop: 'feedbackSubmitUserName', label: '反馈提交人' },
        { prop: 'feedbackSubmitTime', label: '反馈提交时间' }
      ],
      record: {},
      communitySelects: [],

      // -------- Modal ----------
      visible: false,
      modalLoading: false,
      modalType: ''

      // -------- !Modal ----------
    }
  },
  methods: {
    // Requests
    // ------------------------------------------
    getUserFeedbackList (fn) {
      return this.Catch(getUserFeedbackList, {
        onOk (res) {
          this.dataSource = res.data.data
          this.total = res.data.total
        }
      })('loading', (fn || this.$noop)(this.query))
    },

    // Form
    // ------------------------------------------
    ensureAllFormPrepareData () {
      const tasks = [this.getCommunitySelects()]

      return this.Catch(() => Promise.all(tasks), {
        onOk () {},
        onError () {}
      })('loading')
    },

    // Table
    // ------------------------------------------

    onClickDelete (row) {
      // this.ConfirmDelete({
      //   onOk: () =>
      //     this.deleteCommander(row[primaryKey], {
      //       onOk () {
      //         this.$message.success(this.$t('deleteOk'))
      //         this.getUserFeedbackList()
      //       }
      //     })
      // })
    },

    async onClickUpdate (row) {
      await this.ensureAllFormPrepareData()
      this.modalType = 'update'
      this.record = row
      this.visible = true
    },

    async onClickCreate () {
      await this.ensureAllFormPrepareData()
      this.modalType = 'create'
      this.record = {}
      this.visible = true
    },

    // Modal
    // ------------------------------------------
    handleSubmit () {
      this.$refs.form.submit((valid, values) => {})
    },

    // 关闭modal清理数据
    handleClose () {
      this.visible = false
    }
  },
  computed: {
    modalTitle () {
      return this.modalType === 'create'
        ? this.$t('createText')
        : this.$t('updateText')
    }
  },
  components: {},

  created () {
    this.getUserFeedbackList()

    this.inject(this.getUserFeedbackList)

    this.$nextTick(() => (this.showTip = true))
  }
}
</script>
